<template>
	<div id="login">
		<div class="background">
			<img src="../assets/images/background/registerBackgroundImage.jpg" alt="登录背景图片" class="bg-image" />
			<div class="loginContainer">
				<div class="containerHeader">
					<img src="../assets/images/icon/salmonIcon.jpg" alt="网页图标" class="icon-image" />
				</div>
				<h1>登录</h1>
				<el-form :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-ruleForm">
				  <el-form-item label="用户名" prop="username">
					<el-input v-model="ruleForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名或邮箱" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item label="密码" prop="password">
				    <el-input type="password" v-model="ruleForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-link style="margin-top: 10px;" underline="hover" type="primary" @click="$router.push('/register')">没有账号?去注册！</el-link>
				  <el-form-item class="login-btn-wrapper">
				    <el-button type="primary" class="login-btn" @click="$router.push('/index')">登录</el-button>
				  </el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name:"login",
	data() {
		  var validateUsername = (rule, value, callback) =>{
			if (value === '') {
				callback(new Error('请输入用户名'));
			}
		  }
	      var validatePassword = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请输入密码'));
	        }
	      };
	      return {
			labelPosition: 'left',
	        ruleForm: {
			  username: '',
	          password: '',
	        },
	        rules: {
			  username: [
				{ validator: validateUsername, trigger: 'blur'}
			  ],
	          password: [
	            { validator: validatePassword, trigger: 'blur' }
	          ],
	        }
	      };
	    },
	    methods: {
	    }
}
</script>

<style lang="less" scoped>
	#login{
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		
		.background{
			position: fixed;
			width: 100%;
			height: 100%;
			
			.bg-image{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
			
			.loginContainer{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%); /* 添加这个使容器真正居中 */
				background-color: rgba(221, 221, 221, 0.8); /* 改变背景颜色 */
				border: 1px solid #ddd; /* 添加边框 */
				border-radius: 4px; /* 可选：添加圆角 */
				padding: 20px; /* 添加内边距 */
				box-shadow: 12px 12px 2px 1px rgba(255, 255, 255, 0.2); /* 可选：添加阴影效果 */
				width: 400px; /* 设置固定宽度 */
				min-height: 500px;
				color: #000000; /* 修改字体颜色为深灰色 */
				
				h1 {
				    text-align: center; /* 文字水平居中 */
				    margin: 0 0 20px 0; /* 调整下边距 */
				    font-size: 24px; /* 适当增大字号 */
				    color: #333; /* 加深文字颜色 */
				  }
				
				:deep(.el-input__inner) {
				    color: #333; /* 输入文字颜色 */
				    font-size: 16px; /* 文字大小 */
				    font-weight: 500; /* 字重 */
				  }
				
				:deep(.el-form-item__label) {
				    color: #000000 !important; /* 标签颜色 */
				    font-size: 20px !important; /* 标签大小 */
				  }
				
				
				.login-btn-wrapper {
					:deep(.el-form-item__content){
					    margin-left: 0 !important; /* 覆盖Element UI默认偏移 */
					  }
				  display: flex;
				  justify-content: center; /* 水平居中 */
				  align-items: center; /* 垂直居中 */
				  margin-top: 20px !important; /* 增加顶部间距 */
				  
				  .login-btn {
					  margin-top: 25px;
				      width: 100%; /* 宽度100%撑满父容器 */
					  min-width: 200px;
				      padding: 12px 0; /* 增加垂直内边距 */
					  transition: all 0.3s;
					  &:hover {
					      transform: translateY(-2px);
					      box-shadow: 0 4px 12px rgba(41, 170, 221, 0.5);
					  }
					  &:active {
					      transform: translateY(0);
					  }
				  }
				}
				
				.containerHeader{
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 15px;
					
					.icon-image{
						border-radius: 5px; /* 可选：添加圆角 */
						width: 60px;
						height: 60px;
					}
				}
			}
		}
	}
</style>